import { asyncRoutes, constantRoutes } from '@/router'
// 存数据
const state = {
  routes: []
}
// 改 state
const mutations = {
  setRoutes(state, payload) {
    // 这里可以接到筛选过后的动态路由,
    // 实际上菜单应该有本来存在的首页之类静态路由+筛选过后有权限的动态路由实现
    state.routes = [...constantRoutes, ...payload]
  }
}
// 可以做其他的处理(一般是异步)
const actions = {
  filterRoutes(context, menus) {
    //  menus 是导航守卫调用时传入的个人权限列表
    // 这里是路由筛选
    // 根据逻辑
    // 拿到所有要筛选的路由列表(动态路由)
    // 拿到用户的个人信息权限列表
    console.log('vuex拿到权限列表', menus)
    console.log('vuex引入的动态路由列表', asyncRoutes)
    const res = []
    asyncRoutes.forEach(item => {
      if (menus.indexOf(item.name) !== -1) {
        res.push(item)
      }
    })
    console.log('筛选过后路由列表', res)
    // 调用mutations储存数据
    context.commit('setRoutes', res)
    // 这个列表就是用户可以访问的页面
    // 所有的action都是异步存在的，哪怕没有发送异步请求
    // 这里需要返回的东西，都能够被外面调用时，要用async和await来接收
    return res
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
